<script setup>
import { onMounted, ref, onBeforeUnmount } from "vue"
import { gender, nation, education, marry, military, disabitity, bloodMap } from "@/js/base_info_map";
import zhCn from "element-plus/es/locale/lang/zh-cn"
import { Object } from "core-js";
import { flow, reset_params } from "@/js/request_params"
import { userStore } from "@/store/user";
import { delete_float_info } from "@/api/floPop";
import { ElMessage } from "element-plus";
import { get_json_object } from "@/js/area"
import { select_Flow_idnum_info } from '@/js/resident_request_func'
// 后续扩展请复制该文件
//family_establishment_服务
const locale = ref(zhCn);
const service_form = ref();
let json_object = ref([]);
const store = userStore();
const direction = ref('btt');
const drawer = ref(false);
const query_response = ref([
    {
        pid: "0600002",
        idnum: '1',
        name: '耳春龙',
        gender: '男',
        flow: '流动',
        birthday: '2004-4-4',
        nation: '汉族',
        idnum: '111'
    }
]);
const disabledDate = (time) => {
    return time.getTime() > Date.now();
}
const handle_close = () => {
    drawer.value = false;
}

const initFloat = () => {
    flow.value.pid = store.get_use_info.pid;
    flow.value.operatorId = store.get_use_info.id;
    flow.value.changetype = "流动人口信息注销";
    flow.value.changereson = "流动人口信息注销";
    flow.value.pname = store.get_use_info.pname;
    flow.value.popTypeId = 3;
}

const resteFloat = () => {

    flow.value.name = '';
    flow.value.idnum = '';
    flow.value.birthday = '';
    flow.value.genderId = '';
    flow.value.nationId = '';
    flow.value.bloodId = '';
    flow.value.eduId = '';
    flow.value.marryId = '';
    flow.value.disabilityId = '';
    flow.value.militaryId = '';
    flow.value.address = '';
    // initImportant();
}

onMounted(async () => {
    let response = await get_json_object()
    json_object.value.push(response);
    initFloat()
})

onBeforeUnmount(() => {
    reset_params(flow.value)
})

const deleteFloInfo = () => {
    console.log(flow.value);
    delete_float_info(flow.value).then((res) => {
        ElMessage.success(res.msg);
        resteFloat();
    })

    setTimeout(() => {
        location.reload()
    }, 500)
}

</script>

<template>
    <!--
    表单 
    <el-drawer
            v-model="drawer"
            title="信息展示"
            :direction="direction"
            :before-close="handle_close"
    >
   
        <template #default>
            <div class="w-[100%] h-[100%] flex justify-center">
                <el-table :data="query_response" stripe style="width: 100%">
                    <el-table-column prop="pid" label="编号" width="220" />
                    <el-table-column prop="idnum" label="身份证号" width="220" />
                    <el-table-column prop="name" label="姓名" width="220" />
                    <el-table-column prop="gender" label="性别" width="220" />
                    <el-table-column prop="gender" label="流动方向" width="220" />
                    <el-table-column prop="birthday" label="生日" width="220" />
                    <el-table-column prop="nation" label="民族" width="220" />
                    <el-table-column prop="idnum" label="证号" />
                </el-table>
            </div>
        </template>

</el-drawer>
-->
    <div class="w-[100%] h-[100%] flex justify-center">
        <div class="card w-[100%] h-[100%] flex justify-center">
            <spa class="span"></spa>
            <span class="span"></span>
            <span class="span"></span>
            <spa class="span"></spa>
            <div class="shell shadow-xl" style="width:90%;height:90%">
                <svg class="check" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">

                    <path
                        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z">
                    </path>
                </svg>
                <p class="tracking-[10px] text-[20px] font-[800] text-black">流动人口注销</p>
                <el-form class="grid  grid-cols-3 gap-x-14 -gap-y-1  relative justify-items-center items-center"
                    :model="flow" ref="service_form" :rules="rules">
                    <el-form-item label="姓名:">
                        <el-input v-model="flow.name" placeholder="请填写内容" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="性别:">
                        <el-select v-model="flow.genderId" placeholder="" disabled>
                            <el-option v-for="index in Object.keys(gender).length" :key="index" :label="gender[index]"
                                :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="流动方向:">
                        <el-select v-model="flow.nationId" placeholder="" disabled>
                            <el-option v-for="index in Object.keys(nation).length" :key="index" :label="nation[index]"
                                :value="index" disabled></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="出生日期:">
                        <el-config-provider :locale="locale">
                            <el-date-picker style="width:180px" v-model="flow.birthday" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD" type="date" placeholder="请选择" :disabled-date="disabledDate"
                                :size="'default'" />
                        </el-config-provider>
                    </el-form-item>
                    <el-form-item label="身份证号:">
                        <el-input v-model="flow.idnum" placeholder="请填写内容" @change="select_Flow_idnum_info"></el-input>
                    </el-form-item>

                    <el-form-item label="户籍地址:">
                        <el-input v-model="flow.address" placeholder="请填写内容" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="民族:">
                        <el-select v-model="flow.nationId" placeholder="" disabled>
                            <el-option v-for="index in Object.keys(nation).length" :key="index" :label="nation[index]"
                                :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="血型:">
                        <el-select v-model="flow.bloodId" placeholder="" disabled>
                            <el-option v-for="index in Object.keys(bloodMap).length" :key="index"
                                :label="bloodMap[index]" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否残疾:">
                        <el-select v-model="flow.disabilityId" placeholder="" disabled>
                            <el-option disabled v-for="index in Object.keys(disabitity).length" :key="index"
                                :label="disabitity[index]" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="文化程度:">
                        <el-select v-model="flow.eduId" placeholder="" disabled>
                            <el-option v-for="index in Object.keys(education).length" :key="index"
                                :label="education[index]" :value="index" disabled></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="兵役状况:">
                        <el-select v-model="flow.militaryId" placeholder="" disabled>
                            <el-option v-for="index in Object.keys(military).length" :key="index"
                                :label="military[index]" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="婚姻状况:">
                        <el-select v-model="flow.marryId" placeholder="" disabled>
                            <el-option v-for="index in Object.keys(marry).length" :key="index" :label="marry[index]"
                                :value="index"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="居住日期:">
                        <el-config-provider :locale="locale">
                            <el-date-picker style="width:180px" v-model="flow.livedate" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD" type="date" placeholder="请选择" :disabled-date="disabledDate"
                                :size="'default'" />
                        </el-config-provider>
                    </el-form-item>
                    <el-form-item label="居住事由:">
                        <el-input v-model="flow.livereason" placeholder="请填写内容" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="流入事由:">
                        <el-input v-model="flow.liveaddress" placeholder="请填写内容" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="编号:">
                        <el-input v-model="store.get_use_info.pnum" placeholder="请填写内容" disabled
                            style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item label="派出所:">
                        <el-input v-model="flow.pname" placeholder="请填写内容" disabled style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item label="业务类型:">
                        <el-input v-model="flow.changetype" placeholder="请填写内容" disabled
                            style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item class="col-span-2" label="注销原因:">
                        <el-input v-model="flow.changereson" placeholder="请填写内容" style="width:600px"></el-input>
                    </el-form-item>

                </el-form>

                <hr>
                <div class="relative -top-1  flex justify-around items-center">
                    <button class="card_button" @click="deleteFloInfo">
                        注销
                        <svg class="" xmlns="" height="1em" viewBox="0 0 512 512">
                            <path
                                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
                            </path>
                        </svg>
                    </button>
                    <button class="card_button" @click="select_Flow_idnum_info(flow.idnum)">
                        查询信息
                        <svg class="arrow" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                            <path
                                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
                            </path>
                        </svg>
                    </button>
                    <!-- <button @click="drawer = true">
                        查询信息
                        <svg class="arrow" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                            <path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"></path>
                        </svg>
                    </button>-->
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
@import url(../css/form_card.css);

/* 添加背景图片样式 */
body {
    background-image: url('@/assets/background.png');
    background-size: cover; /* 让背景图片覆盖整个页面 */
    background-repeat: no-repeat; /* 不重复显示背景图片 */
    background-position: center center; /* 背景图片居中显示 */
}

.el-form {
    height: 70%;
}

:deep(.el-input__wrapper:hover) {
    --tw-ring-color: rgb(233 213 255);
    box-shadow: var(--tw-ring-inset) 0 0 3px calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    scale: 1.03;
}

:deep(.el-input__wrapper) {
    transition: all 500ms;
}

.el-input :deep(.el-input__wrapper.is-focus) {
    --tw-ring-color: rgb(216 180 254);
    --tw-ring-offset-color: #84f2fc;
    box-shadow: var(--tw-ring-inset) 0 0 3px calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

}

.el-input :deep(.el-input__wrapper) {
    transition: all 500ms;
}

.el-input,
.el-select {

    width: 180px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

:deep(.el-form-item__label) {
    text-shadow: 1px 2px 2px rgba(165, 165, 165, 0.8);
}

.el-form-item:nth-child(1) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 12px;
}

.el-form-item:nth-child(2) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 12px;
}

.el-form-item:nth-child(3) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(4) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(5) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(6) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(7) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 12px;
}

.el-form-item:nth-child(8) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 12px;
}

.el-form-item:nth-child(9) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(10) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(11) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(12) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(13) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(14) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(15) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 2px;
}

.el-form-item:nth-child(16) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 12px;
}

.el-form-item:nth-child(17) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 7px;
}

.el-form-item:nth-child(18) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 1px;
}

.el-form-item:nth-child(19) :deep(.el-form-item__label) {
    position: relative;
    right: 0;
    letter-spacing: 1px;
}
</style>
